<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
</body>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>

<script type="text/babel">
// 1. 创建组件
class Weather extends React.Component {
  constructor(props){
    super(props)
    this.state = {isHot: false, wind: "大风"}
    this.tianQi = this.changeWeath.bind(this) // bind 方法会返回一个新的方法，并将this指向给到传给bind的对象
  }
  // 想想调用的是谁
  hello(){
    console.log("内部标签被点击了")
  }

  // 改变天气的方法
  changeWeath(){
    // 类在实例化时，babel默认给类中的方法开启了严格模式， ps: 严格模式下 this指向的是underfined，反之，指向window
    // 在render赋值的时候，是将次方法给了实例，并没有调用。在方法触发的时候，this就脱离了该实例，又是严格模式，所以
    // this指向是undefind
    //console.log(this) 
    // 如果要使此this指向实例对象，请在构造方法中进行绑定 如： this.changeWeath = this.changeWeath.bind(this)

    // this.state.isHot = !this.state.isHot  // 注意： 这样改state， 不会导致界面的刷新
    
    // 这种写法才能触发页面的更新动作，且只更新state中匹配的值，不是覆盖哦
    this.setState({isHot:!this.state.isHot}) 
    console.log(this.state.isHot) 

    

  }

  render(){
    const {isHot} = this.state
    // 注意绑定事件的写法, 首先放大括号，其次方法名后不带（）
    return <h1 onClick={this.tianQi}>今天天气很{isHot ? "炎热" : "凉爽"}</h1>
  }
}
// 2. 渲染到页面
ReactDOM.render(<Weather />, document.getElementById('root'))

// 3. 测试方法
function hello(){
  console.log("标签被点击了")
}
</script>
</html>